<template>
	<view class="content">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label-width="200" label-position="left" label="店铺名称" prop="store_shop_name">
				<u-input type="select" placeholder="请选择店铺名称" disabled v-model="model.store_shop_name"
					input-align="right" @click="show = true" :placeholderStyle="placeholderStyle"></u-input>
			</u-form-item>
			<u-form-item label-width="200" label-position="left" label="优惠券名称" prop="name">
				<u-input placeholder="请输入优惠券名称" :placeholderStyle="placeholderStyle" v-model="model.name" type="text"
					input-align="right"></u-input>
			</u-form-item>
			<u-form-item label-width="200" label-position="left" label="优惠券金额" prop="amount">
				<u-input placeholder="请输入优惠券金额" :placeholderStyle="placeholderStyle" v-model="model.amount"
					type="number" input-align="right"></u-input>
			</u-form-item>
			<!-- <u-form-item label-width="200" label-position="left" label="消费门槛" prop="enough">
				<u-input placeholder="请输入消费门槛" :placeholderStyle="placeholderStyle" v-model="model.enough" type="number"
					input-align="right"></u-input>
			</u-form-item> -->
			<u-form-item label-width="200" label-position="left" label="优惠券数量" prop="stock">
				<u-input placeholder="请输入优惠券数量" :placeholderStyle="placeholderStyle" v-model="model.stock" type="number"
					input-align="right"></u-input>
			</u-form-item>
			<u-form-item label-width="200" label-position="left" label="优惠券开始时间" prop="usetimestart">
				<u-input type="select" disabled placeholder="请选择优惠券开始时间" :placeholderStyle="placeholderStyle"
					v-model="model.usetimestart" input-align="right" @click="showstartTime = true"></u-input>
			</u-form-item>
			<u-form-item label-width="200" label-position="left" label="优惠券结束时间" prop="usetimeend">
				<u-input type="select" disabled placeholder="请选择优惠券结束时间" :placeholderStyle="placeholderStyle"
					v-model="model.usetimeend" input-align="right" @click="showendTime = true"></u-input>
			</u-form-item>
			<view class="button-box">
				<view class="u-flex u-row-center u-col-center"><button class="u-reset-button save-btn" @tap="onSubmit"
						:disabled="isFormEnd">确定</button></view>
			</view>

		</u-form>
		<!-- 店铺弹窗 -->
		<u-select v-model="show" :list="list" value-name="id" label-name="shop_name" @confirm="confirm"></u-select>
		<!-- 时间选择 -->
		<u-calendar v-model="showstartTime" mode="date" :min-date="minDate" :max-date="maxDate" @change="startIimechange"></u-calendar>
		<u-calendar v-model="showendTime" mode="date" :min-date="minDate" :max-date="maxDate" @change="endIimechange"></u-calendar>

		<!-- <view class="add">
			<u-button type="success" shape="circle" @click="onSubmit()" :disabled="isFormEnd">确定</u-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFormEnd: false,
				list: [],
				model: {
					id: '',
					store_shop_name: '',
					store_shop_id: '',
					name: '',
					amount: '',
					// enough:'',
					stock: '',
					usetimestart: null,
					usetimeend: null,
				},
				placeholderStyle: 'font-size: 28rpx;color:#c4c4c4;textAlign:right;',
				showstartTime: false,
				showendTime: false,
				minDate: new Date().toISOString().slice(0, 10),
				maxDate:"2052-8-1",
				show: false,
				// 表单
				errorType: ['message'],
				rules: {
					store_shop_name: [{
						required: true,
						message: '请选择店铺',
						trigger: ['change', 'blur']
					}],
					name: [{
						required: true,
						message: '请输入优惠券名称',
						trigger: ['change', 'blur']
					}],
					amount: [{
						required: true,
						message: '请输入优惠券金额',
						trigger: ['change', 'blur']
					}],
					// enough: [{
					// 	required: true,
					// 	message: '请输入消费门槛',
					// 	trigger: ['change', 'blur']
					// }],
					stock: [{
						required: true,
						message: '请输入优惠券数量',
						trigger: ['change', 'blur']
					}],
					usetimestart: [{
						required: true,
						message: '请选择优惠券开始时间',
						trigger: ['change', 'blur']
					}],
					usetimeend: [{
						required: true,
						message: '请选择优惠券结束时间',
						trigger: ['change', 'blur']
					}],
				}
			}
		},
		onLoad(option) {
			this.model.id = option.id;
			this.getData()
		},
		onShow() {
			this.list = [];
			this.getList();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 门店详情
			getData() {
				let that = this;
				that.$http_business('store.coupondes', {
					id: this.model.id
				}).then(res => {
					this.model = res.data;
					this.model.store_shop_name = res.data.shop_name;
					this.model.usetimestart = res.data.usetimestart_text;
					this.model.usetimeend = res.data.usetimeend_text;
				})
			}, // 获取列表
			getList() {
				let that = this;
				this.$http_business('store.listNoPage', ).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				});
			},
			confirm(e) {
				var that = this;
				that.model.store_shop_name = e[0].label;
				that.model.store_shop_id = e[0].value;
			},
			// 开始时间
			startIimechange(e) {
				console.log(e);
				this.model.usetimestart = e.result
			},
			// 结束时间
			endIimechange(e) {
				console.log(e);
				this.model.usetimeend = e.result
			},
			onSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.save()
					} else {
						this.$u.toast('请完善表单');
					}
				});
			},

			save() {
				let that = this;
				this.isFormEnd = false;
				that.$http_business('store.addcoupon', that.model, '提交中...').then(res => {
					this.isFormEnd = true;
					if (res.code === 1) {
						uni.showToast({
							title: res.msg,
							success: () => {
								that.$Router.back();
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
	}

	.button-box {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		margin-top: 30rpx;
		border-top: 24rpx solid #F8F8F8;
	}

	.save-btn {
		width: 690rpx;
		line-height: 86rpx;
		background: #FC5351;
		border-radius: 43rpx;
		font-weight: 500;
		color: #ffffff;
		margin: 30rpx 0;
	}

	/deep/ .u-form-item__message {
		text-align: right;
	}
</style>
